<script setup lang="ts">
import {ref, computed, Ref, nextTick} from "vue";
// const ==========================================================================
const CHESS_ROLE_TYPE_NONE = 0;
const CHESS_ROLE_TYPE_A = 1;
const CHESS_ROLE_TYPE_B = 2;

const CHESS_TYPE_NONE = 0;
const CHESS_TYPE_WHITE = 1;
const CHESS_TYPE_BLACK = 2;

// ref var ==========================================================================
let row = ref("15");
let col = ref("15");
const tbody = ref(null);
let intRow = computed(() => parseInt(row.value, 10))
let intCol = computed(() => parseInt(col.value, 10))
// normal var ==========================================================================
// 现在下棋的人
let processPlayer = CHESS_ROLE_TYPE_A;
// 棋盘数据
let chess: number[][];
let refs = [];
let lastTryDownRef: HTMLHtmlElement|undefined = undefined;


// method ==========================================================================
function getChessColor(chessType) {
  if (chessType == CHESS_TYPE_WHITE) return "white";
  if (chessType == CHESS_TYPE_BLACK) return "black";
  return "";
}

function getChessType() {
  if (processPlayer === CHESS_ROLE_TYPE_A) return CHESS_TYPE_WHITE;
  if (processPlayer === CHESS_ROLE_TYPE_B) return CHESS_TYPE_BLACK;
  console.error("valid process role => " + processPlayer);
  return CHESS_TYPE_NONE;
}

function makeRefName(i, j) {
  return (i - 1) * intCol.value + j;
}

function nextPlayer() {
  if (processPlayer == CHESS_ROLE_TYPE_NONE) {
    console.error("valid process role => " + processPlayer);
    return CHESS_ROLE_TYPE_NONE;
  }
  processPlayer = processPlayer === CHESS_ROLE_TYPE_A ? CHESS_ROLE_TYPE_B : CHESS_ROLE_TYPE_A;
  return processPlayer;
}

function chessDown(i, j) {
  console.log("chess down" + i + "," + j);
  const chessType = getChessType();
  if (chess[i][j] == chessType || chess[i][j] == CHESS_TYPE_NONE) {
    lastTryDownRef = undefined;
    chess[i][j] = chessType;
    const chessRef = refs[makeRefName(i, j)];
    chessRef.style.backgroundColor = getChessColor(chessType);
    nextPlayer();
  }
}

function chessTryDown(i: number, j: number) {
  console.log(`${Number.isInteger(i)}==${Number.isInteger(j)}==${chess[i][j]}`)
  console.log("chess try down" + i + "," + j );
  if (chess[i][j] == CHESS_TYPE_NONE || chess[i][j] == undefined) {
    if (lastTryDownRef != undefined) {
      lastTryDownRef.style.backgroundColor = getChessColor(CHESS_TYPE_NONE);
    }
    const chessType = getChessType();
    chess[i][j] = chessType;
    const chessRef = refs[makeRefName(i, j)];
    chessRef.style.backgroundColor = getChessColor(chessType);
    lastTryDownRef = chessRef;
  }
}

function startNewGame() {
  console.log("startNewGame");
  // 创建一个二维数组chess，里面每个值都是0
  chess = [];
  for (let i = 0; i < intRow.value; i++) {
    chess[i] = [];
    for (let j = 0; j < intCol.value; j++) {
      chess[i][j] = CHESS_TYPE_NONE;
    }
  }
  console.log("refs-------------------->")
}

// ori ----------------------------
let getRef = (i, j) => (el) => {
  nextTick(() => refs[makeRefName(i, j)] = el)
  return makeRefName(i, j);
}

</script>

<template>
  <h2>Todo待定。。。。。。。</h2>
  <div>
    <el-input placeholder="row" style="width: 50px" v-model="row"></el-input>
    <el-input placeholder="col" style="width: 50px" v-model="col"></el-input>
    <el-button @click="startNewGame">Start New Game</el-button>
    <el-divider></el-divider>
    <div>
      <table style="background-color: bisque">
        <tbody ref="tbody">
          <tr v-for="i in intRow">
            <td
                v-for="j in intCol"
                style="border: solid; width: 50px; height: 20px"
                :ref="getRef(i, j)"
                :key="makeRefName(i, j)"
                @click="chessTryDown(i, j)"
                @dblclick="chessDown(i, j)"
            >{{makeRefName(i,j)}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>

</style>